<template>
  <div class="roles-container">
    <el-card>
      <!-- 工具栏 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="addRole">新增角色</el-button>
        </el-col>
      </el-row>

      <!-- 列表区 -->
      <el-table
        :data="rolesList"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="角色名称"
          width="280"
        />
        <el-table-column
          prop="description"
          label="角色描述"
        />
        <el-table-column
          prop="address"
          label="操作"
          width="234"
        >
          <template #default="scope">
            <el-button
              size="mini"
              type="primary"
              @click="assignPerm(scope.row.id)"
            >分配权限</el-button>
            <el-button
              size="mini"
              @click="editRole(scope.row.id)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="delRole(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="content" align="middle" style="height: 60px">
        <div class="page">
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageConfig._limit"
            :total="total"
            @current-change="currentChange"
          />
        </div>
      </el-row>

      <!-- 新增弹窗 -->
      <el-dialog :title="roleForm.id ? '编辑角色' : '新增角色'" :visible="isShowDialog" @close="btnCancel">
        <el-form ref="addRole" :model="roleForm" :rules="roleFormRules" label-width="80px">
          <el-form-item label="角色名称" prop="title">
            <el-input v-model="roleForm.title" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="roleForm.description" />
          </el-form-item>
        </el-form>

        <template #footer>
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </template>
      </el-dialog>

      <!-- 分配角色权限弹窗 -->
      <el-dialog title="分配权限" :visible="isShowPerm" @close="btnPermCancel">

        <!-- 多选款组 -->
        <el-checkbox-group v-model="permIds">
          <!-- 树形的作用域插槽可以获取到前节点的 id 和内容 用来生成 checkbox多选框 -->
          <el-tree :data="permList" :props="{ label: 'title' }" default-expand-all>
            <template v-slot="scoped">
              <!-- label 是指选中后存入 permIds 的数据 其实就是权限id -->
              <el-checkbox :label="scoped.data.id">
                {{ scoped.data.title }}
              </el-checkbox>
            </template>
          </el-tree>
        </el-checkbox-group>

        <!-- 确定取消按钮 -->
        <template #footer>
          <el-button size="small" type="primary" @click="btnPermOK">确定</el-button>
          <el-button size="small" @click="btnPermCancel">取消</el-button>
        </template>

      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getRolesList, getRoleTotal, addRole, getRoleDetail, editRole, delRole, getRoleId } from '@/api/setting'
import { getPermList } from '@/api/permissions'
import { listToTreeData } from '@/utils/index'
export default {
  data() {
    return {
      permList: [], // 所有权限列表
      permIds: [], // 被选中的权限 id 数组
      roleId: '',
      isShowPerm: false,
      rolesList: [], // 角色列表
      roleDetail: '',
      pageConfig: {
        _limit: 5, // 每页显示的条目数
        _start: 0 // 起始页
      },
      total: 0, // 总条目数
      isShowDialog: false, // 新增弹窗
      roleForm: {
        title: '', // 标题
        description: '' // 描述
      },

      // 校验表单
      roleFormRules: {
        title: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '该项不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 获取角色列表数据
    this.getRolesList()

    // 获取权限列表
    // const res = await getPermList()
    // console.log(149, res)
    // this.permList = res

    this.permList = listToTreeData(await getPermList(), '0')
    console.log(this.permList)
  },
  methods: {
    // 获取角色列表数据
    async getRolesList() {
      const res = await getRolesList(this.pageConfig)
      // 赋值给角色列表
      this.rolesList = res

      // 获取角色数量
      const total = await getRoleTotal(this.pageConfig)
      this.total = total
    },

    // 页码翻页
    currentChange(newPage) {
      console.log(newPage)
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      // 获取角色列表数据
      this.getRolesList()
    },

    // 新增角色
    addRole() {
      this.isShowDialog = true
    },
    // 新增确定
    async btnOK() {
      try {
        // 校验表单
        await this.$refs.addRole.validate()
        // 发送请求 如果有 id 是编辑 否则 新增
        if (this.roleForm.id) {
          // 编辑
          await editRole(this.roleForm)
          // 提示用户
          this.$message.success('更新成功')
        } else {
          // 新增
          await addRole(this.roleForm)
          // 提示用户
          this.$message.success('新增成功')
        }
        // 关闭弹窗
        this.isShowDialog = false
        // 更新列表最新数据
        this.getRolesList()
      } catch (error) {
        console.log(error)
      }
    },
    // 新增取消
    btnCancel() {
      // 手动清理表单
      this.roleForm = {
        title: '', // 标题
        description: '' // 描述
      }
      // 这个清理函数可以清理绑定过的默认值和报错提示
      // 但额外追加的数据则无法清理
      this.$refs.addRole.resetFields()
      // 关闭弹窗
      this.isShowDialog = false
    },

    // 编辑角色
    async editRole(id) {
      // 回显数据
      this.roleForm = await getRoleDetail(id)
      // 显示弹窗
      this.isShowDialog = true
    },

    // 删除角色
    async delRole(id) {
      try {
        // 弹出二次确认框
        await this.$confirm('是否确认删除？')
        // 发请求(带上 id)
        await delRole(id)
        // 提示用户
        this.$message.success('删除成功')

        // 拓展功能
        // 加载数据前可以判断当前数据是否只剩下一条
        // 如果剩下一条，删除成功就应该没有了，所以往前翻一页
        // 有个例外，如果当前已经是第一页，则无需翻页
        if (this.rolesList.length === 1 && this.pageConfig._start > 1) {
          this.pageConfig._start -= this.pageConfig._limit
        }

        // 更新数据
        this.getRolesList()
      } catch (error) {
        console.log(error)
      }
    },

    // 分配权限
    async assignPerm(roleId) {
      // 分配角色权限，其实是在编辑角色
      this.roleDetail = await getRoleId(roleId)
      this.permIds = this.roleDetail.permissions.map(item => item.id)

      // 需要先获取角色详情
      // 记录被点击的角色 id
      // 方便确定按钮请求
      this.roleId = roleId
      // 弹窗
      this.isShowPerm = true
    },

    // 分配权限确定
    async btnPermOK() {
      // 获取权限列表
      const permList = await getPermList()
      const arr = []
      // 循环提出数据
      this.permIds.forEach(item => {
        permList.forEach(item2 => {
          if (item === item2.id) {
            arr.push(item2)
          }
        })
      })

      // 发送请求
      await editRole({
        ...this.roleDetail,
        permissions: arr
      })
      // 提示用户
      this.$message.success('分配成功')
      // 关闭弹窗
      this.isShowPerm = false
    },
    // 分配取消
    btnPermCancel() {
      // 清理数据
      this.permIds = []
      // 关闭弹窗
      this.isShowPerm = false
    }
  }
}
</script>

<style lang="scss" scoped>
 .page{
  text-align: center;
  width: 100%;
}
  .roles-container {
    margin: 30px;
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }

  }
</style>
